<template>
  <div id="top-card">
    <div class="img">
      <img
        :src="obj.img"
        alt=""
      />
    </div>
    <p>{{obj.name}}</p>
    <p style="color: orangered">{{obj.price}} 元</p>
  </div>
</template>

<script>
export default {
  name: "top-card",
  //组件
  components: {},
  props: {
    obj: {
      type: Object,
      default: () => {
        return {
          name: "Redmi K30S 至尊纪念版",
          price: 3299,
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81808cd191332114f44d8d0cb0d0813a.png?thumb=1&w=200&h=138&f=webp&q=90",
        };
      },
    },
  },
  //数据
  data() {
    return {};
  },
  //挂载后
  mounted() {},
  //方法
  methods: {},
  //过滤，筛选
  filters: {},
  //计算
  computed: {},
  //监听
  watch: {
    //被监听者名称
    $route: {
      //是否一进入页面就开始监听
      immediate: false,
      //执行函数
      handler(newVal, oldVal) {},
      //是否深度监听
      deep: false,
    },
  },
};
</script>

<style lang='scss' scoped>
#top-card {
  width: 180px;
  padding: 35px 10px;
  .img {
    img {
      width: 90%;
    }
  }
  p {
    font-size: 12px;
  }
}
</style>
